<template>
	<view>
		<!-- 加购模块 -->
		<view class="container">

			<view class="buy-more-title">
				<view class="tag">
					加购价
				</view>
				<text v-if="price > 1">已满1元，享受超值加购价</text>
				<text v-else>再购1元，享受超值加购价</text>
			</view>

			<!-- 轮播图 -->
			<swiper class="swiper-buy-more" next-margin="28rpx" :display-multiple-items="2" :indicator-dots="false"
				:autoplay="false" :interval="3000" :duration="1000">
				<swiper-item v-for="(item,index) in buy_more" :key="index">
					<view class="swiper-item" :class="price > 0 ? '' : 'disabled'">
						<view class="image">
							<image :src="item.image" mode="widthFix"></image>
						</view>
						<view class="content">
							<text class="name">{{item.name}}</text>
							<view class="content-bottom">
								<view class="price">
									加购价
									<span>{{item.price}}</span>
								</view>

								<view class="addCart" @tap="addCart_handle(item.id)">
									<image src="../../static/images/default/cart_icon.png" mode="widthFix"></image>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>

				<!-- 查看全部加购商品 -->
				<swiper-item>
					<view class="swiper-item check-all" @tap="checkAll_handle">
						<text>查看全部＞</text>
					</view>
				</swiper-item>
			</swiper>

			<!-- 加购入口 -->
			<view class="buy-more-entrance">
				<view class="tag">加购价</view>


				<block v-if="price > 1">
					<view class="title">
						<text>已满1元，可加购商品</text>
					</view>
					<view class="toAdd" @tap="checkAll_handle">去加购＞</view>
				</block>

				<block v-else>
					<view class="title">
						<text>满1元，可加购商品，还差{{1 - price}}元</text>
					</view>
					<navigator url="/pages/page/buy_more">
						<view class="toAdd">去凑单＞</view>
					</navigator>
				</block>

			</view>

		</view>
	</view>
</template>

<script>
	export default {
		name: "buy-more-swiper",
		props: {
			price: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				buy_more: [{
						id: 1,
						image: "/static/test/category/cate.png",
						name: "成猫专用粮食成猫专用粮食",
						price: "19.90",
					},
					{
						id: 2,
						image: "/static/test/category/cate.png",
						name: "成猫专用粮食",
						price: "19.90",
					},
					{
						id: 3,
						image: "/static/test/category/cate.png",
						name: "成猫专用粮食",
						price: "19.90",
					}
				], //加购商品列表
			};
		},
		watch: {
			// 当前购物车总价
			price(now, old) {
				console.log('price', now)
			}
		},
		methods: {
			// 添加购物车
			addCart_handle(id) {
				console.log('addCartID', id)
			},

			// 查看全部加购商品
			checkAll_handle() {
				uni.navigateTo({
					url: '/pages/page/buy_more'
				})
			}
		}
	}
</script>

<style scoped>
	.container {
		background-color: #ffffff;
		/* margin: 26rpx; */
		padding: 22rpx 12rpx;
		box-sizing: border-box;
		margin: 26rpx;
		border-radius: 18rpx;
		overflow: hidden;
		box-shadow: 0px 0px 6px -3px rgba(0, 0, 0, 0.2);
	}

	.buy-more-title {
		display: flex;
		align-items: center;
		gap: 15rpx;
		margin-bottom: 18rpx;
	}

	.buy-more-title .tag {
		background-color: #ff4646;
		color: #ffffff;
		border-radius: 8rpx;
		padding: 6rpx 8rpx;
		font-size: 22rpx;
		box-sizing: border-box;
	}

	.buy-more-title text {
		font-size: 26rpx;
		color: #4D4D4D;
	}

	.swiper-buy-more {
		border-radius: 8rpx;
		overflow: hidden;
		height: 110rpx;
		background-color: #ffffff;
		margin-bottom: 50rpx;
	}

	.swiper-buy-more .swiper-item {
		display: flex;
		gap: 16rpx;
		padding: 8rpx;
		box-sizing: border-box;
		background-color: #f4f4f4;
		padding-right: 15rpx;
		height: 100%;
		margin-right: 20rpx;
		border-radius: 8rpx;
	}

	.swiper-buy-more .swiper-item.disabled {
		pointer-events: none;
		opacity: .6;
	}

	.swiper-buy-more .swiper-item.check-all {
		background-color: #ffffff;
		border: 2rpx solid #4D4D4D20;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #4D4D4D95;
	}

	.swiper-buy-more .swiper-item .image {
		width: 94rpx;
		height: 94rpx;
		border-radius: 8rpx;
		overflow: hidden;
		box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
	}

	.swiper-buy-more .swiper-item .image image {
		width: 100%;
		display: block;
	}

	.swiper-buy-more .swiper-item .content {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		overflow: hidden;
	}

	.swiper-buy-more .swiper-item .content .name {
		font-size: 26rpx;
		color: #3d3d3d;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	.swiper-buy-more .swiper-item .content .content-bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.swiper-buy-more .swiper-item .content .content-bottom .price {
		font-size: 20rpx;
		color: #ff4646;
	}

	.swiper-buy-more .swiper-item .content .content-bottom .price span {
		font-size: 24rpx;
	}

	.swiper-buy-more .swiper-item .content .content-bottom .addCart {
		width: 40rpx;
		height: 40rpx;
	}

	.swiper-buy-more .swiper-item .content .content-bottom .addCart image {
		width: 100%;
		display: block;
	}

	.container .buy-more-entrance {
		display: flex;
		width: 100%;
		align-items: center;
		padding: 16rpx 20rpx;
		box-sizing: border-box;
		gap: 15rpx;
		background-color: #ff464620;
		border-radius: 15rpx;
		border: 2rpx solid #ff464690;
	}

	.container .buy-more-entrance .tag {
		background-color: #ff4646;
		color: #ffffff;
		border-radius: 8rpx;
		padding: 6rpx 8rpx;
		font-size: 22rpx;
		box-sizing: border-box;
	}

	.container .buy-more-entrance .title {
		font-size: 26rpx;
		color: #3A3A3A;
		flex: 1;
	}

	.container .buy-more-entrance .toAdd {
		color: #ff4646;
	}
</style>